<HTML>
<HEAD>
<TITLE>JavaScript Source Code 3000:  Calculators:  RGB Slider</TITLE>
<META HTTP-EQUIV="JavaScript Source Code 3000" CONTENT = "no-cache">
<META NAME="date" CONTENT="2000-09-09">
<META NAME="channel" CONTENT="Web Developer">
<META NAME="author" CONTENT="Andrew Houser (houser@houserdesign.com)">
<META NAME="section" CONTENT="Calculators">
<META NAME="description" CONTENT="Simple RGB to HEX color converter utilizing DHTML sliders.  Amazing!">
</HEAD>

<BODY BGCOLOR=#ffffff vlink=#0000ff>

<BR>
<center>
<table width=600 cellpadding=0 cellspacing=10>
<tr>
<td width=468 align=center>

    
    
</td>
<td width=120 align=center>
    
</td>
</tr>
</table>
<BR>
<BR>
<basefont size=3>
<FONT SIZE="+2" FACE="Helvetica,Arial">
<A HREF="../index.htm" /" TARGET="_top"><FONT COLOR="#0000FF"><b>Home</b></font></A>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}">
<A HREF="index.htm" /calculators/"><font color="#FF0000"><b>Calculators</b></font></A>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}">
<FONT COLOR="#006666"><b>RGB Slider</b></font></font>
<BR>
<BR>
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td><font FACE="helvetica,arial,geneva">
<br>
<br>
<!-- Description --><!--content_start-->
Simple RGB to HEX color converter utilizing DHTML sliders.  Amazing!
<hr>
</td></tr>
</table>
<form>
Click to <input type=button value="Open RGB Slider Demo" onClick="window.open('http://calculators.javascriptsource.com/rgb-slider-demo.html','sliderdemo', 'width=600,height=300,left=150,top=150');"></form><P>
<P>
<a name="source">
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td BGCOLOR=yellow><font FACE="helvetica,arial,geneva"><b>JavaScript Source Code 3000:  Calculators:  RGB Slider</b>
<p>Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Apple-s).  The script is yours!!!
<br><br></font></td></tr>
<tr><td BGCOLOR=yellow ALIGN=CENTER>
<form NAME="copy">

<DIV align="center">
<input type=button value="Highlight All" onClick="javascript:this.form.txt.focus();this.form.txt.select();">&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="text" NAME="total" VALUE="Script Size:  10.47 KB" size=24>
</DIV>

<textarea NAME="txt" ROWS=20 COLS=75 WRAP=VIRTUAL>

&lt;!-- SIX STEPS TO INSTALL RGB SLIDER:

  1.  Open a new HTML document, save it as rgb-slider.html
  2.  Copy the coding into the HEAD of rgb-slider.html
  3.  Add the onLoad event handler into the BODY tag
  4.  Put the last coding into the BODY of rgb-slider.html
  5.  Put the demo button in our HTML page
  6.  Save all the RGB Slider images to your web site  --&gt;

&lt;!-- STEP ONE: Create a new document, save it as rgb-slider.html --&gt;

&lt;!-- STEP TWO: Put this code in the HEAD of your HTML document  --&gt;

&lt;HEAD&gt;

&lt;style type="text/css"&gt;
&lt;!--
#subtext { font-family:helvetica,arial; font-size:8pt; background-color:#CCCCCC; layer-background-color:#CCCCCC;}
#title { font-family:helvetica,arial; font-size:13pt; font-weight:bold; }

#red { position:absolute; left:54; top:100; width:256; height:10; z-index:1; visibility:visible; background-image:url(redback.gif); layer-background-image:url(redback.gif); clip:rect(0px 256px 10px 0px);}
#green { position:absolute; left:54; top:120; width:256; height:10; z-index:1; visibility:visible; background-image:url(greenback.gif); layer-background-image:url(greenback.gif); clip:rect(0px 256px 10px 0px);}
#blue { position:absolute; left:54; top:140; width:256; height:10; z-index:1; visibility:visible; background-image:url(blueback.gif); layer-background-image:url(blueback.gif); clip:rect(0px 256px 10px 0px);}

#redSlider { position:absolute; left:50; top:98; width:8; height:14; z-index:2; visibility:visible; background-image:url(scroll-boxh.gif); layer-background-image:url(scroll-boxh.gif); clip:rect(0px 8px 14px 0px);}
#greenSlider { position:absolute; left:50; top:118; width:8; height:14; z-index:2; visibility:visible; background-image:url(scroll-boxh.gif); layer-background-image:url(scroll-boxh.gif); clip:rect(0px 8px 14px 0px);}
#blueSlider { position:absolute; left:50; top:138; width:8; height:14; z-index:2; visibility:visible; background-image:url(scroll-boxh.gif); layer-background-image:url(scroll-boxh.gif); clip:rect(0px 8px 14px 0px);}

#display { position:absolute; left:320; top:100; width:50px; height:50px; z-index:1; visibility:visible; background-color:#000000; layer-background-color:#000000; }
#hexValue { position:absolute; left:54; top:160; width:320; height:20; z-index:1; visibility:visible;}
#titleBar { position:absolute; left:54; top:70; width:320; height:20; z-index:1; background-color:#DDDDDD; layer-background-color:#DDDDDD;}
#colorTable { position:absolute; left:380; top:70; width:320; height:200; z-index:1; visibility:visible;}
//--&gt;
&lt;/style&gt;

&lt;SCRIPT LANGUAGE="JavaScript"&gt;
&lt;!-- Original:  Andrew Houser (houser@houserdesign.com) --&gt;
&lt;!-- Web Site:  http://www.houserdesign.com --&gt;

&lt;! &gt;
&lt;! &gt;

&lt;!-- Begin
function init() {
ns4 = (document.layers)?true:false;
ie4 = (document.all)?true:false;
sliderMin = 50;
sliderMax = 306;
rValue=0;
gValue=0;
bValue=0;
r1 = '0';
r2 = '0';
g1 = '0';
g2 = '0';
b1 = '0';
b2 = '0';
Rgb = '0';
rGb = '0';
rgB = '0';
rActive = false;
gActive = false;
bActive = false;
document.onmousedown = mouseDown
document.onmousemove = mouseMove
document.onmouseup = mouseUp
if (ns4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
if (ns4) {
domRed = document.redSlider;
domRed.xpos = parseInt(domRed.left);
domRed.ypos = parseInt(domRed.top);
domRed.w = domRed.clip.width;
domRed.h = domRed.clip.height;
domGreen = document.greenSlider;
domGreen.xpos = parseInt(domGreen.left);
domGreen.ypos = parseInt(domGreen.top);
domGreen.w = domGreen.clip.width;
domGreen.h = domGreen.clip.height;
domBlue = document.blueSlider;
domBlue.xpos = parseInt(domBlue.left);
domBlue.ypos = parseInt(domBlue.top);
domBlue.w = domBlue.clip.width;
domBlue.h = domBlue.clip.height;
domDisplay = document.display;
domValue = document.hexValue.document.frmValue.valueDisp;
domredValue = document.hexValue.document.frmValue.RgbDisp;
domgreenValue = document.hexValue.document.frmValue.rGbDisp;
domblueValue = document.hexValue.document.frmValue.rgBDisp;
}
else {
domRed = redSlider.style;
domRed.xpos = redSlider.offsetLeft;
domRed.ypos = redSlider.offsetTop;
domRed.w = redSlider.clientWidth;
domRed.h = redSlider.clientHeight;
domGreen = greenSlider.style;
domGreen.xpos = greenSlider.offsetLeft;
domGreen.ypos = greenSlider.offsetTop;
domGreen.w = greenSlider.clientWidth;
domGreen.h = greenSlider.clientHeight;

domBlue = blueSlider.style;
domBlue.xpos = blueSlider.offsetLeft;
domBlue.ypos = blueSlider.offsetTop;
domBlue.w = blueSlider.clientWidth;
domBlue.h = blueSlider.clientHeight;
domDisplay = display;
domValue = frmValue.valueDisp;
domredValue = frmValue.RgbDisp;
domgreenValue = frmValue.rGbDisp;
domblueValue = frmValue.rgBDisp;
}
hexArray = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
}
function mouseDown(e) {
if ((ns4 && e.which!=1) || (ie4 && event.button!=1)) return true;
var x = (ns4)? e.pageX : event.x+document.body.scrollLeft;
var y = (ns4)? e.pageY : event.y+document.body.scrollTop;
if (x &gt; domRed.xpos && x &lt; domRed.xpos+domRed.w && y &gt; domRed.ypos && y &lt; domRed.ypos+domRed.h){ rActive = true; dragObject = domRed; }
if (x &gt; domGreen.xpos && x &lt; domGreen.xpos+domGreen.w && y &gt; domGreen.ypos && y &lt; domGreen.ypos+domGreen.h){ gActive = true; dragObject = domGreen; }
if (x &gt; domBlue.xpos && x &lt; domBlue.xpos+domBlue.w && y &gt; domBlue.ypos && y &lt; domBlue.ypos+domBlue.h){ bActive = true; dragObject = domBlue; }
if (rActive==true || gActive==true || bActive==true){
if (x&gt;=dragObject.xpos && x&lt;=dragObject.xpos+dragObject.w) {
dragObject.dragOffsetX = x-dragObject.xpos
}
return false
}
else {
return true
   }
}
function mouseMove(e) {
var x = (ns4)? e.pageX : event.x+document.body.scrollLeft;
var y = (ns4)? e.pageY : event.y+document.body.scrollTop;
if (rActive) {
rMoveTo = x-dragObject.dragOffsetX;
if (rMoveTo &gt; sliderMax) rMoveTo = 306;
if (rMoveTo &lt; sliderMin) rMoveTo = 50;
domRed.xpos = rMoveTo;
domRed.left = domRed.xpos;
rValue = (domRed.xpos+4)-50;
calcValue(rMoveTo-50, 'red');
}
if (gActive) {
gMoveTo = x-dragObject.dragOffsetX;
if (gMoveTo &gt; sliderMax) gMoveTo = sliderMax;
if (gMoveTo &lt; sliderMin) gMoveTo = sliderMin;
domGreen.xpos = gMoveTo;
domGreen.left = domGreen.xpos;
gValue = (domGreen.xpos+4)-50;
calcValue(gMoveTo-50, 'green');
}
if (bActive) {
bMoveTo = x-dragObject.dragOffsetX;
if (bMoveTo &gt; sliderMax) bMoveTo = sliderMax;
if (bMoveTo &lt; sliderMin) bMoveTo = sliderMin;
domBlue.xpos = bMoveTo;
domBlue.left = domBlue.xpos;
bValue = (domBlue.xpos+4)-50;
calcValue(bMoveTo-50, 'blue');
}
return true
}
function mouseUp(e) {
var x = (ns4)? e.pageX : event.x+document.body.scrollLeft
var y = (ns4)? e.pageY : event.y+document.body.scrollTop
rActive = false;
gActive = false;
bActive = false;
return true
}
function calcValue(base, color) {
base -= 1;
if (base &lt; 16) { first = 0; }
else { first = parseInt(base/16); }
if (base &lt; 0 ) { second = 0; base = 0; }
else { second = parseInt(base%16); }
c1=hexArray[first];
c2=hexArray[second]; 
if (color == 'red') { r1 = c1; r2 = c2; Rgb=base; }
else if (color == 'green') { g1 = c1; g2 = c2; rGb=base; }
else { b1 = c1; b2 = c2; rgB=base; }
domValue.value = eval('"'+r1+r2+g1+g2+b1+b2+'"');
domredValue.value = eval('"'+Rgb+'"');
domgreenValue.value = eval('"'+rGb+'"');
domblueValue.value = eval('"'+rgB+'"');
if (ns4) { domDisplay.bgColor = eval('"#'+r1+r2+g1+g2+b1+b2+'"'); }
else { domDisplay.style.backgroundColor = eval('"#'+r1+r2+g1+g2+b1+b2+'"'); }
return true;
}
function manualSet(value,color) {
if (value &lt; 0) value=0;
if (value &gt; 255) value=255;
++value;
calcValue(value,color);
if (color == 'red'){ domRed.xpos = value+sliderMin-4; domRed.left = domRed.xpos; }
else if (color == 'green'){ domGreen.xpos = value+sliderMin-4; domGreen.left = domGreen.xpos; }
else { domBlue.xpos = value+sliderMin-4; domBlue.left = domBlue.xpos; }
}
function convertHex(hexString) {
if(hexString == null) hexString = domValue.value;
inputHexArray = new Array(6);
for(i=0;i&lt;=5;++i) {
inputHexArray[i] = hexString.charAt(i);
}
for(i=0;i&lt;=5;++i) {
tempHexVal = inputHexArray[i];
for(j=0;j&lt;=15;++j) {
if(tempHexVal == hexArray[j]) tempHexVal = j;
}
inputHexArray[i] = tempHexVal;
}
Rgb = (inputHexArray[0]*16)+inputHexArray[1]+1;
calcValue(Rgb,'red');
manualSet(Rgb,'red');
rGb = (inputHexArray[2]*16)+inputHexArray[3]+1;
calcValue(rGb,'green');
manualSet(rGb,'green');
rgB = (inputHexArray[4]*16)+inputHexArray[5]+1;
calcValue(rgB,'blue');
manualSet(rgB,'blue');
}
// End --&gt;
&lt;/script&gt;
&lt;/HEAD&gt;

&lt;!-- STEP THREE: Insert the onLoad event handler into your BODY tag  --&gt;

&lt;BODY OnLoad="init()"&gt;

&lt;!-- STEP FOUR: Copy this code into the BODY of your HTML document  --&gt;

&lt;div id="red"&gt;&lt;/div&gt;
&lt;div id="green"&gt;&lt;/div&gt;
&lt;div id="blue"&gt;&lt;/div&gt;

&lt;div id="redSlider"&gt;&lt;/div&gt;
&lt;div id="greenSlider"&gt;&lt;/div&gt;
&lt;div id="blueSlider"&gt;&lt;/div&gt;
&lt;div id="colorTable"&gt;
&lt;table border=0 cellpadding=0 cellspacing=1&gt;
&lt;tr&gt;&lt;td colspan=18 align=center id="subtext"&gt;Standard 216 Color Palette&lt;/td&gt;&lt;/tr&gt;
&lt;script&gt;
&lt;!--
clr = new Array('00','33','66','99','CC','FF');

for(k=0;k&lt;6;++k){
for(j=0;j&lt;6;){
document.write('&lt;tr&gt;\n');
for(m=0;m&lt;3;++m){
for(i=0;i&lt;6;++i){
document.write('&lt;td bgcolor=#'+clr[k]+clr[j+m]+clr[i]+'&gt;');
document.write('&lt;a href="javascript:void(null)" ');
document.write('onClick="convertHex(\''+clr[k]+clr[j+m]+clr[i]+'\')\;"&gt;');
document.write('&lt;img src=blankgif width=10 height=10 border=0&gt;&lt;/a&gt;&lt;/td&gt;\n');
}
}
j+=3;
document.write('&lt;/tr&gt;\n');
}
}
//--&gt;
&lt;/script&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;div id="display"&gt;&lt;img src="blank.gif" width=50 height=50 border=0&gt;&lt;/div&gt;
&lt;div id="titleBar"&gt;
&lt;table border=0 cellpadding=2 cellspacing=0 width=320&gt;
&lt;tr&gt;
&lt;td id="title"&gt;Houser's RGB2HEX DHTML App&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;div id="hexValue"&gt;&lt;form name="frmValue"&gt;
&lt;table border=0 cellpadding=2 cellspacing=0 width=320 bgcolor=#EEEEEE&gt;
&lt;tr&gt;
&lt;td align=center&gt;
&lt;table border=0 cellpadding=2 cellspacing=0&gt;
&lt;tr&gt;
&lt;td id="subtext"&gt;Red&lt;/td&gt;
&lt;td id="subtext"&gt;Green&lt;/td&gt;
&lt;td id="subtext"&gt;Blue&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;input type=text size=3 maxlength=3 name="RgbDisp" value="0" onBlur="manualSet(this.value,'red');"&gt;&lt;/td&gt;
&lt;td&gt;&lt;input type=text size=3 maxlength=3 name="rGbDisp" value="0" onBlur="manualSet(this.value,'green');"&gt;&lt;/td&gt;
&lt;td&gt;&lt;input type=text size=3 maxlength=3 name="rgBDisp" value="0" onBlur="manualSet(this.value,'blue');"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/td&gt;
&lt;td align=center&gt;
&lt;table border=0 cellpadding=2 cellspacing=0&gt;
&lt;tr&gt;
&lt;td id="subtext"&gt;Hexdecimal&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;input type=text size=6 maxlength=6 name="valueDisp" value="000000" onBlur="convertHex();"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;&lt;/form&gt;
&lt;/div&gt;

&lt;!-- STEP FIVE: Put this code on the page where you want to open the RGB Slider script --&gt;

&lt;form&gt;
&lt;input type=button value="Open RGB Slider" onClick="window.open('rgb-slider.html','sliderdemo', 'width=600,height=300,left=150,top=150');">&lt;/form&gt;&lt;P&gt;


&lt;!-- STEP SIX: Save all the RGB Slider images to your web site --&gt;
&lt;!-- All the images are included in the ZIP file at:

../img/rgb-slider/rgb-slider.zip

Upload all the images to the same directory where you will use the RGB Slider script. --&gt;

 

&lt;!-- Script Size:  10.47 KB --&gt;</textarea><br><font FACE="helvetica,arial,geneva"></font></td></tr>

</table>
</form>
</FONT>
</CENTER>


</center>
</body></html>